<template>
  <div class="k3">
    <h3><dv-decoration-7>青年大学习完成情况</dv-decoration-7></h3>
    <dv-border-box-10 class="study" :color="['#50649a', '#50649b']">
      <!-- <div id="BDiv" ref="myChart2"></div> -->
      <div id="DDiv" ref="myChart3"></div>
    </dv-border-box-10>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { zhuti } from "../assets/index.js";
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      stuName: [],
      number: [],
      classInfo: [], // 订阅的消息
    };
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/youthstudy/list/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        this.stuName = response.data.data.stuNameList;
        this.number = response.data.data.numberList;
        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      const myChart3 = echarts.init(this.$refs.myChart3, zhuti);
      const spirit =
        "image://";
      const maxData = 8;
      const option3 = {
        // title: {
        //   text: "个人大学习完成情况",
        //   left: "center",
        //   top: "5%",
        // },
        tooltip: {
          axisPointer: {
            type: "shadow",
            pointer: {
              label: {
                color: "#00FFFF",
              },
            },
          },
        },
        yAxis: {
          max: maxData,
          splitLine: { show: false },
          offset: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            margin: 10,
          },

          // formatter: function (param) {
          //       // let style = "";
          //       return (
          //         param +'期'
          //       );
          //     //   return (
          //     // params[0].name +
          //     // "<br>" +
          //     },
        },
        xAxis: {
          data: this.stuName,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          // axisLabel: { show: false },
          inverse: true,
          axisLabel: {
            // show: false,
            margin: 2,
            color: "#fff",
            fontSize: 8,
            // rotate: 45,
            // interval: 0, // 强制显示所有标签
          },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 65,
            end: 100,
            xAxisIndex: [0, 1],
          },
          {
            type: "inside",
            realtime: true,
            start: 50,
            end: 100,
            xAxisIndex: [0, 1],
          },
        ],
        grid: {
          top: "17%",
          // height: 200,
          left: "15%",
          right: "15%",
          bottom: "33%",
          // top:'20%',
        },
        series: [
          {
            // current data
            type: "pictorialBar",
            symbol: spirit,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbolClip: true,
            symbolSize: 20,
            symbolBoundingData: maxData,
            data: this.number,

            z: 10,
          },
          {
            // full data
            type: "pictorialBar",
            itemStyle: {
              opacity: 0.2,
            },
            label: {
              show: false,
              // formatter: function (params) {
              //   return ((params.value / maxData) * 100).toFixed(1) + " %";
              // },
              position: "top",
              // offset: [10, 0],
              color: "red",
              fontSize: 18,
            },
            animationDuration: 0,
            symbolRepeat: "fixed",
            symbolMargin: "5%",
            symbol: spirit,
            symbolSize: 20,
            symbolBoundingData: maxData,
            data: this.number,
            z: 5,
          },
        ],
      };
      myChart3.setOption(option3);
      window.window.addEventListener("resize", function () {
        // 改变图表尺寸，在容器大小发生改变时需要手动调用
        myChart3.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.pubId = pubsub.subscribe("selectClassInfo", (msgName, data) => {
      this.classInfo = data;
      this.getInfo();
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k3 {
  display: flex;
  flex-direction: column; /* 子组件内部垂直排列 */
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.study {
  padding: 0px;
}
h3 {
  font-size: 18px;
  width: 100%;
  height: 100%;
  line-height: 100%;
  flex: 1;
  color: aqua;
  /* margin-bottom: 10px; */
}
/* #BDiv {
  float: left;
  width: 50%;
  height: 100%;
} */
#DDiv {
  transform: scale(1.3, 1.2);
  width: 100%;
  height: 100%;
  flex: 9;
  position: relative;
  padding: 10px;
  top: -10px;
  left: 1rem;
}
</style>
